<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码第三步</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <script>
        window.onload=function(){
            var rate = 3.75;
            wh = document.body.clienWidth||document.documentElement.clientWidth;
            document.documentElement.style.fontSize = wh/rate+"px";
        }
    </script>
    <script src="jquery.js"></script>

</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .all{
            position:relative;
        }
        .top{
            border-bottom: 1px solid #cccccc;
            text-align: center;
            height:0.4rem;
            font-size: 18px;
            padding-top:0.15rem;
        }
        .text{
            font-size:14px;
            margin:0.1rem 0.2rem;
        }
        img{
            width:0.4rem;
        }
        .content{
            margin-left:0.2rem;
            margin-right: 0.2rem;
            font-size: 14px;
            border-bottom: 0.01rem solid #ccc;
        }
        .content input{
            padding:0.2rem 0.2rem 0.16rem 0;
            background:none;
            border:none;
            font-size:14px;
            color:#ccc;
            outline:none;

        }
        .tips{
            font-size:14px;
            color:#d9d4d1;
            margin:0.1rem 0.2rem;
        }
        .next{
            width:3rem;
            margin:0.2rem auto;
            font-size: 14px;

        }
        .next input{
            padding:0.14rem;
            background:#8e8e8e;
            color:#333;
            border-radius:0.4rem;
            border:none;
            width:3rem;
            font-size:14px;
            outline: none;
        }
        .img img{
            position:absolute;
            top:0.16rem;
            left:0.14rem;
            width:0.2rem;
            height:0.28rem;
        }
        #pwd1error{
            font-size: 10px;
            color:red;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="top">忘记密码</div>
    <div class="text">请设置新的登录密码</div>
    <div class="content">
        <input placeholder="6-20位，不能与旧密码相同" id="pwd1"/><span id="pwd1error"></span>
    </div>
    <div class="tips">备注：请将密码设置为6-20位，并且由字母、数字和符号两种以上组合，不能与旧密码相同</div>
    <div class="next"><input type="button" value="完成" id="submitBtn" disabled></div>
    <div class="img"><a href="forget2.html"><img src="images/return.png"></a></div>
</div>

<script>
    var pwd0Reg = /^.{6,16}$/;
    var pwd1Reg =/[0-9]+/;
    var pwd2Reg =/[a-zA-Z]+/;
    var pwd3Reg =/~!@#\$%\^&*\(\)_+={}[]/;


    var pwd1 = document.getElementById("pwd1");
    pwd1.onkeyup = function(){
        var pwd1Value = pwd1.value;
        var rightCount = 0;

        var lengthValid = pwd0Reg.test(pwd1Value);
        var numberValid = pwd1Reg.test(pwd1Value);
        var letterValid = pwd2Reg.test(pwd1Value);
        var symbolValid = pwd3Reg.test(pwd1Value);

        if(numberValid){
            rightCount++;
        }
        if(letterValid){
            rightCount++;
        }
        if(symbolValid){
            rightCount++;
        }
        if(!lengthValid||rightCount<2) {
            pwd1error.innerHTML = "密码格式错误！";
            isPwd1Right = false;
        }else{
            pwd1error.innerHTML="<img src='images/dui.png' style='width:14px'/>";
            isPwd1Right = true;
        }
        checkAll();
    };

    function checkAll(){
        var isRight = isPwd1Right;
        if(isRight) {
            submitBtn.removeAttribute("disabled");
            submitBtn.style.background="red";
            submitBtn.style.color="#fff";
        }else{
            submitBtn.setAttribute("disabled","disabled");
        }
    }
    pwd1.onblur = function(){
        var a=localStorage.getItem("phone");
        $.post("http://test.hfjava.com/shop/updateuserpwd?phone="+a+"&newPwd="+pwd1.value, {}, function(data){
            if(data=="Saved"){
                alert("密码修改成功!");
                location="login.html";
            }
        })
    }

</script>
</body>
</html>
</body>
</html>